<template>
  <div id="main" style="width: 70vw; height: 55vh;"></div>
</template>

<script>
import * as echarts from "echarts";
import getRandom from "@/utils/Random";
import initDate from "@/utils/initDate";

export default {
  name: "TokenEcharts.vue",
  props:["TokenData"],
  data() {
    return { data: this.TokenData };
  },
  created() {
    console.log(this.TokenData)
  },
  mounted() {
    this.renderEcharts();
    this.addItem();
  },

  methods: {
    renderEcharts() {
      if (!document.getElementById("main")) {
        return;
      }
      const chartDom = document.getElementById("main");
      const myChart = echarts.init(chartDom);
      let option;

      // prettier-ignore
      const dateList = this.data.map(function (item) {
        return item[0];
      });
      const valueList = this.data.map(function (item) {
        return item[1];
      });
      option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          }
        ],
        title: [
          {
            left: 'center',
            text: 'Gradient along the y axis'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateList
          }
        ],
        yAxis: [{}],
        grid: [
          {
            bottom: '10%'
          }
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList
          }
        ]
      };

      option && myChart.setOption(option);
    },
    addItem() {
      let i = 0;
      const timer = setInterval(() => {
        this.renderEcharts();
        i++;
        if (i === 50) {
          clearInterval(timer);
        }
      }, 300);
    },
  },
}
</script>

<style scoped>

</style>
